<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <el-row :gutter="20">
              <div class="newstyle">
                <el-col :span="24">
                  <el-row>
                    <div id="table1"></div>
                  </el-row>
                </el-col>
              </div>
            </el-row>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
import echarts from 'echarts'
export default {
  data() {
    return {
      // icon: require('@/assets/images/onlinecar.png'),
      // activeIndex: '3',
      activeIndex: '3',
      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {},
  // watch: {
  //   event(curVal) {
  //     if (this['handle_' + curVal.name]) {
  //       this['handle_' + curVal.name](curVal.data)
  //     }
  //   },
  //   $route(val) {
  //     this.open()
  //   }
  // },
  created() {},

  mounted() {
    this.showecharts()
  },

  methods: {
    showecharts() {
      let myChart = this.$echarts.init(document.getElementById('table1'))
      let option = {
        title: {
          text: '发电功率预测',
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          },
          data: [
            '风力发电实际电量',
            '风力发电预测电量',
            '光伏发电实际电量',
            '光伏发电预测电量',
            '三联供发电实际电量',
            '三联供发电预测电量'
          ]
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            data: [
              '0:00',
              '0:15',
              '0:30',
              '0:45',
              '1:00',
              '1:15',
              '1:30',
              '1:45',

              '2:00',
              '2:15',
              '2:30',
              '2:45',
              '3:00',
              '3:15',
              '3:30',
              '3:45',
              '4:00',
              '4:15',
              '4:30',
              '4:45',
              '5:00',
              '5:15',
              '5:30',
              '5:45',
              '6:00',
              '6:15',
              '6:30',
              '6:45',
              '7:00',
              '7:15',
              '7:30',
              '7:45',
              '8:00',
              '8:15',
              '8:30',
              '8:45',
              '9:00',
              '9:15',
              '9:30',
              '9:45',
              '10:00',
              '10:15',
              '10:30',
              '10:45',
              '11:00',
              '11:15',
              '11:30',
              '11:45',
              '12:00',
              '12:15',
              '12:30',
              '12:45',
              '13:00',
              '13:15',
              '13:30',
              '13:45',
              '14:00',
              '14:15',
              '14:30',
              '14:45',
              '15:00',
              '15:15',
              '15:30',
              '15:45',
              '16:00',
              '16:15',
              '16:30',
              '16:45',
              '17:00',
              '17:15',
              '17:30',
              '17:45',
              '18:00',
              '18:15',
              '18:30',
              '18:45',
              '19:00',
              '19:15',
              '19:30',
              '19:45',
              '20:00',
              '20:15',
              '20:30',
              '20:45',
              '21:00',
              '21:15',
              '21:30',
              '21:45',
              '22:00',
              '22:15',
              '22:30',
              '22:45',
              '23:00',
              '23:15',
              '23:30',
              '23:45',
              '24:00(时/分)'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '功率/W',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 15,
              padding: 2
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '风力发电实际电量',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量',
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#d7f4f8' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#eefcfd' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 3,
                  type: 'solid',
                  color: '#4fd6d2'
                }
              },
              emphasis: {
                color: '#4fd6d2',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'dotted',
                  color: '#4fd6d2' //折线的颜色
                }
              }
            }, //线条样式
            symbolSize: 5, //折线点的大小

            areaStyle: {
              opacity: 0.3
              // color: '#fff'
            },
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210
            ]
          },
          {
            name: '风力发电预测电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            areaStyle: {
              opacity: 0.3
            },
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101
            ]
          },
          {
            name: '光伏发电实际电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            areaStyle: {
              opacity: 0.3
            },
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101
            ]
          },
          {
            name: '光伏发电预测电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            data: [
              320,
              332,
              301,
              334,
              390,
              330,
              320,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101
            ]
          },
          {
            name: '三联供发电实际发电量',
            type: 'line',
            stack: '总量3',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            data: [
              320,
              332,
              301,
              334,
              390,
              330,
              320,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101
            ]
          },
          {
            name: '三联供发电预测电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            data: [
              320,
              332,
              301,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              334,
              390,
              330,
              320,
              120,
              132,
              101,
              134,
              90,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              230,
              210,
              120,
              132,
              101,
              ,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101
            ]
          }
        ]
      }
      myChart.setOption(option)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    showecharts2() {
      let myChart3 = this.$echarts.init(document.getElementById('table1'))
      let option3 = {
        // backgroundColor: '#005A5B',
        title: {
          // text: '配电网(单位/伏特)',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['配电网']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: ['1.0', '2.0', '3.0', '4.0', '5.0', '6.0', '7.0']
          }
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            type: 'value'
          }
        ],
        series: [
          {
            name: '支路健康指数',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            areaStyle: {},
            data: [2.3, 3.4, 4.5, 2.5, 1.4, 0.5, 3.6]
          }
        ]
      }
      myChart3.setOption(option3)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart3.resize()
      })
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#444444;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#444444;color:#FEFEFE;'
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    }
  }
}
</script>
<style lang="less" scoped>
#table1 {
  width: 1800px;
  height: 800px;
  // background-image: url(../../assets/images/新UI16.png);
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  background-color: #04322e;
}

.body {
  width: 100%;
  height: 100%;

  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
}

.newstyle {
  // background-image: url(../assets/images/table3.png);
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-top: 20px;

  border-radius: 20px;
  .el-row {
    margin-top: 15px;
    margin-left: 20px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 560px;
}
.el-header {
  // background-color: #373d41;
  // display: flex;
  align-items: center;
}
</style>
